<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>

    <link rel="stylesheet" href="./css/style3.css">

    <title>状态监测</title>
  </head>
  <body>
    <div id="app">
      <div class="head_dinary">
        <div class="title"><span>报警日志</span></div>
        <div class="table_position">
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th scope="col">序号</th>
                <th scope="col">异常地点</th>
                <th scope="col">异常设备</th>
                <th scope="col">异常点位</th>
                <th scope="col">异常值</th>
                <th scope="col">数值</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="l in dinary">
                <th scope="row">{{l.idx}} </th>
                <td>{{l.pst}} </td>
                <td>{{l.eqt}}</td>
                <td>{{l.pot}}</td>
                <td>{{l.err}}</td>
                <td>{{l.val}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <button type="button" class="btn btn-primary" @click="checking">更新日志</button>
          <button type="button" class="btn btn-danger" @click="clear">清除日志</button>
        </div>
      </div>

      <div class="conditon_now">
        <!-- <a_box v-for="get in pageshow" :item = 'get'></a_box> -->
        <div class="card" style="width: 18rem;" v-for="item in pageshow">
          <img src="./images/motor.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title"> <span class="name">{{item.name}}</span>  </h5>
            <!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
            <ul class="list-group list-group-flush">
              <li class="list-group-item"> <span class="key">均方根值: </span> <span :class='[item.RMS>5? "not_good":"value"]'>{{item.RMS}}</span>  </li>
              <li class="list-group-item"> <span class="key">峭度值:</span>  <span :class='[item.kurtosis>5? "not_good":"value"]'>{{item.kurtosis}}</span>  </li>
              <li class="list-group-item"> <span class="key">状态评估:</span>  <span :class='[item.condition=="中"? "not_good":"value"]'>{{item.condition}}</span>  </li>
              <li class="list-group-item"> <span class="key">当前温度</span>  <span :class='[item.tmp>100? "not_good":"value"]'>{{item.tmp}}</span>  </li>
            </ul>
            <a href="#" class="btn btn-primary" @click="opennewtag(item)">详细信息</a>
          </div>
        </div>
      </div>
      <!-- AddUrlParm('booststrape1.html','x','hello_world') -->
      <!-- AddUrlParm('booststrape1.html','x','hello_world') -->
      
      
      <!-- <div>{{pageshow}} </div> -->
      <nav aria-label="Page navigation example">
        <ul class="pagination  pagination-lg ">
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous" @click="prePage">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li v-for ="index in indexs"  :class= '[index==cur? "page-item active":"page-item"]' >
            <a class="page-link" @click="gotopage(index)">{{index}}</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#" aria-label="Next" @click="nextPage">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="./js/bootstrap.bundle.min.js" ></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

      // Vue.component('a_box',{
      //   props: ['item'],
      //   template:`<div class="card" style="width: 18rem;">
      //     <img src="./images/motor.jpg" class="card-img-top" alt="...">
      //     <div class="card-body">
      //       <h5 class="card-title"> <span class="name">{{item.name}}</span>  </h5>
      //       <!-- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> -->
      //       <ul class="list-group list-group-flush">
      //         <li class="list-group-item"> <span class="key">均方根值: </span> <span :class='[item.RMS>5? "not_good":"value"]'>{{item.RMS}}</span>  </li>
      //         <li class="list-group-item"> <span class="key">峭度值:</span>  <span :class='[item.kurtosis>5? "not_good":"value"]'>{{item.kurtosis}}</span>  </li>
      //         <li class="list-group-item"> <span class="key">状态评估:</span>  <span :class='[item.condition=="中"? "not_good":"value"]'>{{item.condition}}</span>  </li>
      //         <li class="list-group-item"> <span class="key">当前温度</span>  <span :class='[item.tmp>100? "not_good":"value"]'>{{item.tmp}}</span>  </li>
      //       </ul>
      //       <a href="#" class="btn btn-primary" @click="AddUrlParm('booststrape1.html','x',1)">详细信息</a>
      //     </div>
      //   </div>`
      // })
      var app = new Vue({
        el:"#app",
        data:{
          cur:1,
          standard:{RMS:5,kurtosis:5},
          maxdisplay:8,
          machine:[{machine:"水泵电机", equipment:"蒸馏（防爆）-机封水泵", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:3.11,dia:"正常",resLife:50},
                        {machine:"风机电机", equipment:"饲料-风机", name:"1.电机自由端1H",
                          kind:"RH505",RMS:5.14,kurtosis:5.75,tmp:50,condition:"差",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:2.11,dia:"正常",resLife:100},
                        {machine:"鼓风机电机", equipment:"液化", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:7.11,dia:"正常",resLife:80},
                        {machine:"水泵电机", equipment:"循环水站", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
                        F1:5.55,F2:1.67,F3:5.68,SVDD:3.11,dia:"正常",resLife:90},
                        {machine:"水泵电机", equipment:"分离干燥", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"中",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:9.11,dia:"轴承外圈故障",resLife:200},
                        {machine:"刮板电机", equipment:"粉碎脱胚", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
                        F1:8.55,F2:1.67,F3:5.68,SVDD:3.11,dia:"正常",resLife:150},
                        {machine:"水泵电机", equipment:"空压冷冻站", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:9.11,dia:"正常",resLife:450},
                        {machine:"粉碎机电机", equipment:"液化", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"良",
                        F1:0.55,F2:1.67,F3:5.68,SVDD:3.11,dia:"正常",resLife:250},
                        {machine:"水泵电机", equipment:"蒸馏（防爆）-机封水泵", name:"1.电机自由端1H",
                          kind:"RH505",RMS:3.14,kurtosis:5.75,tmp:50,condition:"优",
                        F1:3.55,F2:1.67,F3:5.68,SVDD:0.11,dia:"正常",resLife:150},],
          dinary:[{idx:1,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"峭度值", val:6.33}]
        },
        methods:{
          update_dinary:function(item,err,val){
            // item,err,val
            var L = this.dinary.length+1;
            // console.log(L);
            this.dinary.push({idx:L,pst:item.name,eqt:item.name,pot:"驱动端",err:err, val:val});
            // this.dinary.push({idx:5,pst:"防爆（蒸馏）",eqt:"机封水泵",pot:"驱动端",err:"均方根值", val:5.27});
          },
          checking:function(){
            this.machine.forEach(element => {
              // console.log(element);
              if(element.RMS>this.standard.RMS){
                // console.log(element.RMS);
                this.update_dinary(element,"均方根值",element.RMS);
              }
              if(element.kurtosis>this.standard.kurtosis){
                this.update_dinary(element,"峭度值",element.kurtosis);
              }
            });
          },
          clear:function(){
            this.dinary.splice(0,this.dinary.length);
          },
          gotopage:function(data){
            if(data!=this.cur){
              this.cur=data;
            }
          },
          prePage:function(){
            if(this.cur>1){
              this.cur--;
            }
          },
          nextPage:function(){
            if(this.cur<this.all){
              // console.log(this.all,this.cur)
              this.cur++;
            }
          },
          opennewtag:function(item){
            var URL = 'booststrape1.html';
            URL = this.AddUrlParm(URL,"machine",item.machine);
            URL = this.AddUrlParm(URL,"equipment",item.equipment);
            URL = this.AddUrlParm(URL,"name",item.name);
            URL = this.AddUrlParm(URL,"kind",item.kind);
            URL = this.AddUrlParm(URL,"RMS",item.RMS);
            URL = this.AddUrlParm(URL,"kurtosis",item.kurtosis);
            URL = this.AddUrlParm(URL,"tmp",item.tmp);
            URL = this.AddUrlParm(URL,"condition",item.condition);
            URL = this.AddUrlParm(URL,"F1",item.F1);
            URL = this.AddUrlParm(URL,"F2",item.F2);
            URL = this.AddUrlParm(URL,"F3",item.F3);
            URL = this.AddUrlParm(URL,"SVDD",item.SVDD);
            URL = this.AddUrlParm(URL,"dia",item.dia);
            URL = this.AddUrlParm(URL,"resLife",item.resLife);
            // URL = this.AddUrlParm(URL,'y','hello_world');
            console.log(URL);
            xadmin.add_tab_f(item.machine,URL,true);
          },
          AddUrlParm:function (url, key, value) {
            var returnUrl = ''
            if (url.indexOf('?') == -1) {
                returnUrl += url + '?' + key + '=' + value
            } else {
                if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) {
                    returnUrl += url + '&' + key + '=' + value
                } else {
                    var isDone = false
                    var startIndex = 0
                    var endIndex = url.length - 1
                    var parm = '?' + key + '='
                    for (var i = 0; i < url.length; i++) {
                        if (url.substr(i, parm.length) == parm) {
                            startIndex = i + parm.length
                            for (var j = startIndex; j < url.length; j++) {
                                if (url[j] == '&') {
                                    endIndex = j
                                    break
                                } else if (j == url.length - 1) {
                                    endIndex = url.length
                                }
                            }
                            isDone = true
                            break
                        }
                    }
                    if (!isDone) {
                        parm = '&' + key + '='
                        for (var i = 0; i < url.length; i++) {
                            if (url.substr(i, parm.length) == parm) {
                                startIndex = i + parm.length
                                for (var j = startIndex; j < url.length; j++) {
                                    if (url[j] == '&') {
                                        endIndex = j
                                        break
                                    } else if (j == url.length - 1) {
                                        endIndex = url.length
                                    }
                                }
                                break
                            }
                        }
                    }
                    var parmKeyValue = parm + url.substring(startIndex, endIndex)
                    returnUrl = url.replace(parmKeyValue, parm + value)
                }
            }
            // console.log(returnUrl);
            // xadmin.add_tab_f('最大化',returnUrl,true);
            // location.reload();
            return returnUrl
          }
        },
        computed:{
          indexs:function(){
            var left = 1;
            var right = this.all;
            var ar=[];
            if(this.all>=5){
              if(this.cur>3 && this.cur<this.all-2){
                left = this.cur-2;
                right = this.cur+2;
              }else{
                if(this.cur<=3){
                  left=1;
                  right=5;
                }else{
                  right = this.all;
                  left = this.all-4;
                }
              }
            }
            while(left<=right){
              ar.push(left);
              left++;
            }
            // console.log(ar);
            return ar;
          },
          all:function(){
            if(this.machine.length/this.maxdisplay <1){
              return 1;
            }else if(this.machine.length/this.maxdisplay >=1 && this.machine.length/this.maxdisplay !=0){
              return this.machine.length/this.maxdisplay +1;
            }
            return this.machine.length/this.maxdisplay;
          },
          pageshow:function(){
            if(this.cur!=this.all){
              // console.log(this.machine.slice((this.cur-1)*9,this.cur*9));
              return this.machine.slice((this.cur-1)*this.maxdisplay,this.cur*this.maxdisplay);
            }
          }
        }
      })
    </script>



    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
  </body>
</html>